<template>
  <div class="basic_info">
    <div class="authority">
      <div class="authorityButton">
        <el-button type="primary" size="small " @click="saveRights()">保存设置</el-button>
        <el-button size="small " @click="onShowStaff">复制权限</el-button>
        <el-button size="small" @click="resetAuthority">初始化权限</el-button>
        <el-button size="small " :loading="loading" @click="refreshPage()">刷新</el-button>
      </div>
      <div class="container">
        <div class="selectForm">
          <div class="div_select">
            <el-select v-model="roleValue" placeholder="请选择角色" @change="onChangeRole">
              <el-option v-for="item in roleOptions" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </div>
          <!-- 左侧人员列表 -->
          <div class="div_table">
            <el-table ref="userOrRoleTable" :data="tableData" height="100%" highlight-current-row
              @row-click="onClickTable">
              <el-table-column min-width="40px" prop="serialNumber" label="序号">
                <template slot-scope="scope">
                  <div v-if="scope.row.id === userOrRoleId && roleCode!== 'admin'" class="index_button">
                    <i @click.stop="addRow(scope.$index)" class="el-icon-circle-plus-outline"
                      style="font-size: 20px;"></i>
                    <i @click.stop="deleteRow(scope.row)" class="el-icon-remove-outline" style="font-size: 20px;"></i>
                  </div>
                  <div v-else class="index_p">{{ scope.$index + 1 }}</div>
                </template>
              </el-table-column>
              <el-table-column min-width="50px" prop="username" label="人员编码"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column min-width="50px" prop="realname" label="人员姓名"></el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="rightSelect">
          <div class="buttonAuthority">
            <el-button :type="isActive == 1 ? 'primary' : ''" @click="handleAsideTable">功能模块权限</el-button>
            <el-button :type="(isActive == 2 && otherType == 'bill') ? 'primary' : ''" @click="handleElse('bill')">单据权限</el-button>
            <el-button :type="(isActive == 2 && otherType == 'print') ? 'primary' : ''" @click="handleElse('print')">打印权限</el-button>
            <el-button :type="(isActive == 2 && otherType == 'cost') ? 'primary' : ''" @click="handleElse('cost')">成本价格权限</el-button>
            <el-button :type="isActive == 3 ? 'primary' : ''" @click="handleStoreTable">仓库管理权限</el-button>
          </div>
          <div :class="isActive == 1 ? 'authority_table' : 'div_table'">
            <!-- 功能模块权限 -->
            <AsideTable ref="asideTableRef" v-show="isActive == 1" :dataTree="dataTree" :isAdmin="roleCode == 'admin'"></AsideTable>
            <!-- 其他管理权限 -->
            <ElseAdministration ref="elseAdministrationRef" :permitData="otherPermitData" :checkIds="otherCheckIds"
              :tableData="otherRights" @getSelectIds="getSelectIds" v-show="isActive == 2" :isAdmin="roleCode == 'admin'"></ElseAdministration>
            <StoreAdministration ref="storeAdministrationRef" :permitData="otherPermitData" :checkIds="otherCheckIds"
              :tableData="otherRights" @getSelectIds="getSelectIds" v-show="isActive == 3" :isAdmin="roleCode == 'admin'"></StoreAdministration>
          </div>
          <div v-show="isActive == 1" class="tips_bottom">
            <p>提示：在表格点击鼠标右键菜单，可按模块和按功能项（按行、按列）进行批量设置。超级用户权限无法修改，不支持右键菜单。</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择商品弹框 -->
    <DialogStaff ref="commodityRef" @onSelectStaff="onSelectStaff" :roleId="roleId"></DialogStaff>
    <!-- 成功提示框 -->
    <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess>
    <!-- 职务/角色选择 -->
    <DialogJobRole ref="jobRoleRef" toJobRole="role" @onSelect="onSelectJobRole"></DialogJobRole>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AsideTable from './AsideTable.vue'
import ElseAdministration from './ElseAdministration.vue'
import StoreAdministration from './StoreAdministration.vue'
import DialogStaff from '@/views/components/dialogStaff'
import DialogJobRole from '@/views/components/dialogJobRole'
import PopupSuccess from '@/views/components/popupSuccess'
import { getAction, postAction } from '@/api/manage'
import Vue from 'vue'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
export default {
  name: 'authority',
  data() {
    return {
      // 传递给弹框的数据
      tipsData: {
        tipsWords: '',
      },
      roleOptions: [], // 角色数据列表
      roleValue: '', // 角色数据
      tableData: [], // 操作员表格数据
      isActive: 1, // 控制权限按钮切换
      dataTree: {}, // 功能模块权限数据
      otherRights: [], // 其他管理权限数据
      otherCheckIds: [], // 其他管理权限id
      otherPermitData: {}, // 其他管理权限折扣权限数据
      userOrRoleId: '', //选中的用户
      roleId: '', //角色的id
      roleCode: '', // 角色的roleCode 管理员-admin
      beforeCheckIds: [], // 修改前的权限
      beforeElseCheckIds: [], // 其他模块修改前的权限
      selectOtherIds: '',
      ckOptions: [], // 仓库列表
      menuList: [], // 菜单列表
      parentMenuList: [], // 主菜单列表
      childMenuList: [], // 子菜单列表
      loading: false,
      forceNext: false, // 强制下一步
      // 等待提示弹窗
      timer: null,
      number: 20,
      elLoading: null,
      otherType: 'bill', //其他权限详细区分类型
    }
  },
  components: {
    AsideTable,
    ElseAdministration,
    StoreAdministration,
    DialogStaff,
    PopupSuccess,
    DialogJobRole
  },
  computed: {
    ...mapGetters(['loginUserInfo']),
  },
  created() {
    this.getWarehouseData()
    this.getRoleList()
  },
  mounted() {
    // console.log(this.loginUserInfo.id)
    // this.getHandlerList()
    // this.getRolePermitList()
  },
  watch: {
    tableData() {
      this.$nextTick(() => {
        if (!this.roleId) {
          // 如果没有选择角色则默认选中第一个操作员信息
          this.$refs.userOrRoleTable.setCurrentRow(this.tableData[0])
        }
      })
    },
    roleValue(newVal) {
      this.roleId = newVal
      this.getRoleCode()
    }
  },
  methods: {
    /**
     * 获取所有仓库数据
     */
    getWarehouseData() {
      getAction('/xghStorehouse/xghStorehouse/queryListByPole', {}).then((res) => {
        if (res.code === 200) {
          this.ckOptions = res.result
          this.ckOptions.forEach(item => {
            this.$set(item, 'selected', false)
          })
          this.jsonStr3 = JSON.stringify(this.ckOptions)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 打开赋值单据弹出框
    onShowStaff() {
      this.$refs.jobRoleRef.dialogVisible = true
    },
    // 赋值单据弹框
    onSelectStaff(val) {
      if (val.length == 0) {
        return
      }
      let ids = []
      for (let index = 0; index < val.length; index++) {
        const element = val[index];
        ids.push(element.id)
      }
      let obj = {
        roleId: this.roleId,
        userIds: ids,
      }
      postAction('/role/xghAccountBookRole/assignRoleToUser', obj).then(res => {
        if (res.success) {
          this.$elMessage.success(res.message)
          this.getHandlerList()
        } else {
          this.$elMessage.error(res.message)
        }
      })
      // if (res.code !== 200) {
      //   return
      // }
      // // this.getRolePermitList()
      // this.tipsData.tipsWords = res.result
      // this.$refs.successRef.dialogVisible = true
    },
    // 获取角色权限列表
    getRolePermitList() {
      // if (this.otherRights.length > 0 && !this.forceNext) {
      //   return
      // }
      const that = this
      // roleId 暂用 1, 换成 this.roleId
      getAction(`role/xghAccountBookRole/getMenusAndPermissionsByRoleId/${this.roleId}`).then((res) => {
        clearInterval(that.timer)
        that.elLoading.close()
        if (res.code == 200) {
          that.otherRights = res.result.otherPerms
          that.menuList = res.result.menuPermissionsVos || []
          that.parentMenuList = []
          if (that.menuList && that.menuList.length > 0) {
            that.menuList.forEach((element) => {
              this.$set(element, 'name', element.description)
              if (element.parentId == 0) {
                that.parentMenuList.push(element)
              }
            })
          }
          that.dataTree = {
            roleId: that.roleId,
            roleCode: this.getRoleCode(),
            menuList: that.menuList,
            parentMenus: that.parentMenuList,
          }
          let cks = JSON.parse(JSON.stringify(that.ckOptions))
          let selectStores = res.result.roleStorehouses || []
          selectStores.forEach(store => {
            cks.forEach(ck => {
              if (store.xghStorehouseId == ck.id) {
                ck.selected = true
              }
            })
          })
          that.$refs.asideTableRef.edit(that.dataTree)
          that.$refs.elseAdministrationRef.edit(that.otherRights)
          that.$refs.storeAdministrationRef.edit(cks, this.roleCode)
          // // 存储功能模块原来的权限
          // let ids = JSON.parse(JSON.stringify(res.result.checkIds))
          // this.beforeCheckIds = [...ids]
          // // 存储其他管理模块原来的权限
          // let elseIds = JSON.parse(JSON.stringify(res.result.checkElseIds))
          // this.beforeElseCheckIds = [...elseIds]
          // _this.dataTree = { ...res.result, menus: resultList }
          // // 给其他权限的id赋值
          // _this.otherCheckIds = res.result.checkElseIds
          // _this.otherPermitData = {
          //   permitContext: res.result.permitContext,
          //   permitId: res.result.permitId,
          //   permitValue: res.result.permitValue,
          //   valueId: res.result.valueId,
          // }
        }
      })
    },
    // 获取角色下拉框数据
    async getRoleList() {
      const that = this
      that.elLoading = that.$loading({
        lock: true,
        text: '权限正在加载中，请耐心等待，预计剩余20s...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)',
      });
      that.number = 20
      if (that.timer) {
        clearInterval(that.timer)
      }
      that.timer = setInterval(() => {
        setTimeout(() => {
          if (that.number > 0) {
            that.number--
            that.elLoading.setText(`权限正在加载中，请耐心等待，预计剩余${that.number}s...`)
          } else {
            clearInterval(that.timer)
            that.elLoading.close()
          }
        }, 0);
      }, 1000)
      let userInfo = Vue.ls.get(USER_INFO)
      // console.log(this.loginUserInfo.id, userInfo.id)
      const res = await postAction('role/xghAccountBookRole/getAbRoleListByAbIdAndUserId', {
        userId: userInfo.id,
      })
      if (res.code !== 200) {
        return
      }
      this.roleOptions = res.result
      this.roleValue = this.roleOptions.length > 0 ? this.roleOptions[0].id : ''
      this.roleId = this.roleValue
      if (this.roleOptions.length > 0) {
        this.roleValue = this.roleOptions[0].id
        this.roleId = this.roleValue
        this.roleCode = this.roleOptions[0].roleCode
        this.getHandlerList()
        this.getRolePermitList()
      } else {
        //this.loading = false
      }
    },
    // 获取所有操作员
    async getHandlerList() {
      const res = await getAction('role/xghAccountBookRole/getUsersByAbIdAndRoleId', {
        roleId: this.roleId,
      })
      //this.loading = false
      if (res.code !== 200) {
        return
      }
      this.tableData = res.result
    },
    // 角色改变时触发
    onChangeRole(val) {
      this.roleId = val
      this.getRoleCode()
      this.userOrRoleId = ''
      this.getRolePermitList()
      this.getHandlerList()
    },
    // 添加操作员
    addRow() {
      this.$refs.commodityRef.dialogVisible = true
    },
    // 删除操作员
    deleteRow(row) {
      let obj = {
        roleId: this.roleId,
        userIds: [row.id],
      }
      postAction('/role/xghAccountBookRole/removeRoleFromUser', obj).then((res) => {
        if (res.code == 200) {
          this.getHandlerList()
          this.$elMessage.success(res.message)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    handleMenus(data) {
      data.forEach((item) => {
        item['isState'] = false
        let arr = [1, 2, 4, 6, 8, 10, 15]
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == item.id) {
            item['isState'] = true
          }
        }
        if (item.children) {
          this.handleMenus(item.children)
        }
      })
      return data
    },
    // 点击操作员列表，展示相应操作员的权限信息
    onClickTable(row) {
      this.tableData.forEach((item) => {
        if (item.id == row.id) {
          this.userOrRoleId = (this.userOrRoleId == item.id) ? '' : item.id
        }
      })
      // this.getRolePermitList()
    },
    // 处理其他点击按钮
    handleElse(type) {
      console.log('---', type);
      
      this.otherType = type
      this.isActive = 2
      this.$refs.elseAdministrationRef.filterType(type)
    },
    // 处理模块权限
    handleAsideTable() {
      this.isActive = 1
    },
    // 处理仓库权限
    handleStoreTable() {
      this.isActive = 3
    },
    // 获取其他权限模块修改后的id
    getSelectIds(ids) {
      this.selectOtherIds = ids
    },
    // 保存权限设置
    async saveRights() {
      if (this.roleCode == 'admin') {
        this.$elMessage.warning('超级用户权限不可修改')
        return
      }
      const that = this
      that.elLoading = that.$loading({
        lock: true,
        text: '权限正在保存中，请耐心等待，预计剩余30s...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)',
      });
      that.number = 30
      if (that.timer) {
        clearInterval(that.timer)
      }
      that.timer = setInterval(() => {
        setTimeout(() => {
          if (that.number > 0) {
            that.number--
            that.elLoading.setText(`权限正在保存中，请耐心等待，预计剩余${that.number}s...`)
          } else {
            clearInterval(that.timer)
            that.elLoading.close()
          }
        }, 0);
      }, 1000)
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountBookId = accountBook && accountBook.id
      let menuList = this.$refs.asideTableRef.menuList
      let rightDataList = this.$refs.asideTableRef.rightDataList
      rightDataList.forEach((right) => {
        menuList.forEach((menu) => {
          if (right.menuId == menu.menuId) {
            menu = right
          }
        })
      })
      let otherList = this.$refs.elseAdministrationRef.otherList
      let userInfo = Vue.ls.get(USER_INFO)
      // 仓库权限处理
      let storeList = []
      if (this.roleCode != 'admin') {
        let cks = this.$refs.storeAdministrationRef.otherList
        cks.forEach(ck => {
          if (ck.selected) {
            storeList.push({
              xghStorehouseId: ck.id,
              roleId: this.roleId,
              xghAccountBookId: accountBookId,
            })
          }
        })
      }
      let params = {
        menuPermissionsVos: menuList,
        otherPerms: otherList,
        roleId: this.roleId,
        userId: userInfo.id,
        roleStorehouses: storeList,
      }
      const res = await postAction('role/xghAccountBookRole/updatePerms', params)
      clearInterval(that.timer)
      that.elLoading.close()
      if (res.code == 200) {
        this.$elMessage.success('保存成功!')
        this.getRolePermitList()
        let userPerms = res.result || {}
        this.$lcStorage.set('userPermissions', userPerms)
      } else {
        this.$elMessage.warning(res.message)
      }
    },
    // 刷新页面
    refreshPage() {
      // location.reload()
      this.loading = true
      this.getRoleList()
      setTimeout(() => {
        this.loading = false
      }, 1000);
    },
    isSetUserRight() {
      // 保存成功后判断当前被修改的人员是否为登录用户
      let needSetStorage = false
      if (this.userOrRoleId && this.userOrRoleId == this.loginUserInfo.id) {
        // 需要重新获取用户的权限信息
        needSetStorage = true
      } else {
        // 如果不是修改的人员权限，只是修改的角色权限，则需要判断当前角色下是否有登录用户，
        // 如果有需要重新获取用户的权限进行保存
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id == this.loginUserInfo.id) {
            needSetStorage = true
            break
          }
        }
      }
      return needSetStorage
    },
    // 获取登录用户权限列表push
    getLoginUserPermitList() {
      getAction('/xghMenu/menuList', {
        type: 1, // 用户角色区分 0.角色权限 1.用户权限
        userOrRoleId: this.loginUserInfo.id,
      }).then((res) => {
        if (res.code == 200) {
          this.selectIds = [...res.result.checkIds, ...res.result.checkElseIds]
          if (res.result.menus && res.result.menus.length > 0) {
            // 给菜单添加状态字段
            let menus = this.handleMenus(res.result.menus)
            menus.forEach((element) => {
              if (element.name == '其他管理权限') {
                // 缓存用户其他管理权限
                this.$lcStorage.set('userOtherPermissions', element.children || [])
              }
            })
            // 取菜单中的子数据存储到缓存中
            let subList = this.getSubMenus(menus)
            // 缓存用户权限
            this.$lcStorage.set('userPermissions', subList)
          }
        }
      })
    },
    // 给菜单添加状态字段
    handleMenus(data) {
      data.forEach((item) => {
        item['checked'] = false
        for (let i = 0; i < this.selectIds.length; i++) {
          if (this.selectIds[i] == item.id) {
            item['checked'] = true
          }
        }
        if (item.children || item.buttons) {
          this.handleMenus(item.children || item.buttons)
        }
      })
      return data
    },
    // 取菜单中的子数据存储到缓存中
    getSubMenus(data) {
      let buttonsList = []
      data.forEach((item) => {
        // 如果当前循环的数据中有button，则存存储
        if (item.buttons) {
          buttonsList.push(item)
        } else {
          if (item.children) {
            this.getSubMenus(item.children)
          }
        }
      })
      return buttonsList
    },
    //初始化权限
    resetAuthority() {
      var that = this
      if (this.roleCode == 'admin') {
        this.$elMessage.warning('超级用户权限不可初始化')
        return
      }
      getAction('/role/xghAccountBookRole/initAdminRolePermission', { roleId: this.roleId}).then(res => {
        if (res.code == 200) {
          this.$elMessage.success('初始化成功!')
          that.otherRights = res.result.otherPerms
          that.menuList = res.result.menuPermissionsVos || []
          that.parentMenuList = []
          if (that.menuList && that.menuList.length > 0) {
            that.menuList.forEach((element) => {
              this.$set(element, 'name', element.description)
              if (element.parentId == 0) {
                that.parentMenuList.push(element)
              }
            })
          }
          that.dataTree = {
            roleId: that.roleId,
            roleCode: this.getRoleCode(),
            menuList: that.menuList,
            parentMenus: that.parentMenuList,
          }
          let cks = JSON.parse(JSON.stringify(that.ckOptions))
          let selectStores = res.result.roleStorehouses || []
          selectStores.forEach(store => {
            cks.forEach(ck => {
              if (store.xghStorehouseId == ck.id) {
                ck.selected = true
              }
            })
          })
          that.$refs.asideTableRef.edit(that.dataTree)
          that.$refs.elseAdministrationRef.edit(that.otherRights)
          that.$refs.storeAdministrationRef.edit(cks, this.roleCode)
          // let fieldSetting = res.result.fieldSetting
          // let obj = JSON.parse(fieldSetting)

          // that.otherRights = obj.otherPerms
          // that.menuList = obj.menuPermissionsVos || []
          // that.parentMenuList = []
          // if (that.menuList && that.menuList.length > 0) {
          //   that.menuList.forEach((element) => {
          //     this.$set(element, 'name', element.description)
          //     if (element.parentId == 0) {
          //       that.parentMenuList.push(element)
          //     }
          //   })
          // }
          // that.dataTree = {
          //   roleId: that.roleId,
          //   roleCode: this.getRoleCode(),
          //   menuList: that.menuList,
          //   parentMenus: that.parentMenuList,
          // }
          // that.$refs.asideTableRef.edit(that.dataTree)
          // that.$refs.elseAdministrationRef.edit(that.otherRights)
          // this.$elMessage.success('保存成功!')
          // this.getRoleList()
        } else {
          this.$elMessage.warning(res.message)
        }
      })

    },
    getRoleCode() {
      for (let index = 0; index < this.roleOptions.length; index++) {
        const element = this.roleOptions[index];
        if (element.id == this.roleId) {
          this.roleCode = element.roleCode
          return element.roleCode
        }
      }
      return ''
    },
    // 复制权限选择目标角色
    onSelectJobRole(val, state) {
      if (val && val.length == 1 && val[0].id == this.roleId) {
        this.$elMessage.warning('目标角色与当前角色相同！')
      } else {
        let ids = []
        val.forEach((item) => {
          if (item.id != this.roleId) {
            ids.push(item.id)
          }
        })
        let params = {
          sourceRoleId: this.roleId,
          targetRoleIds: ids.toString()
        }
        getAction('/role/xghAccountBookRole/copyRolePermission', params).then(res => {
          if (res.success) {
            this.$elMessage.success(res.result)
          } else {
            this.$elMessage.error(res.message)
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.authority {
  width: 100%;
  height: 100%;
  // overflow: hidden;
}

// 顶部设置按钮
.authorityButton {
  width: 100%;
  height: 0.900056rem;
  display: flex;
  align-items: center;

  ::v-deep .el-button {
    width: 80px;
    height: 30px;
    border: none;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ::v-deep .el-button--primary {
    background: #1993fb;
    color: #fff;
  }
}

// 操作模块
.container {
  width: 100%;
  height: calc(100% - 0.900056rem);
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 10px 20px;
}

.selectForm {
  width: 4.125258rem;
  height: 100%;
}

.div_select {
  width: 100%;
  height: 0.562535rem;
  display: flex;
  align-items: center;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        width: 4.125258rem;
        height: 0.562535rem;
        border-color: #e3e3e3;
        padding: 0 7px;
      }

      .el-input__suffix {
        display: flex;
        align-items: center;

        .el-select__caret {
          margin-top: 0;
        }
      }
    }
  }
}

.div_table {
  width: 100%;
  margin-top: 10px;
  height: calc(100% - 30px - 10px);
}

::v-deep .el-table {
  border: 1px solid #e3e3e3;
  border-bottom: none;
  box-sizing: border-box;

  th,
  td {
    padding: 0;
    color: #666;
    box-sizing: border-box;
    border-right: 1px solid #e3e3e3;

    .cell {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      white-space: nowrap;

      .index_select {
        display: flex;
        align-items: center;
        width: 100%;

        .el-select {
          width: 100%;

          .el-input {
            display: flex;
            height: 0.431277rem;

            .el-input__inner {
              height: 0.431277rem;
              font-size: 12px;
              color: #666;
              border-radius: 0;
            }

            .el-input__icon {
              line-height: 0.431277rem;
            }
          }
        }
      }
    }

    &:last-child {
      border-right: none;
    }
  }

  tr.current-row>td {
    background-color: #e3f6ff;
  }

  th {
    .cell {
      background: #ededed;
      justify-content: center;
    }
  }

  .index_p {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .index_button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      font-size: 12px;

      &:first-child {
        color: #1893fc;
      }

      &:last-child {
        color: #fd5050;
      }
    }
  }

  .el-table__body tr:hover>td {
    background: #e3f6ff;
  }

  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #e5e5e5;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #c9c9c9;
  }
}

.rightSelect {
  width: calc(100% - 4.125258rem - 0.281268rem);
  background: #fff;

  .buttonAuthority {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    background: #fff;

    ::v-deep .el-button {
      width: 90px;
      height: 30px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.093756rem;
      color: #666;
      border-color: #e3e3e3;
      font-size: 12px;
    }

    ::v-deep .el-button--primary {
      background-color: #1993fb;
      border-color: #1993fb;
      color: #fff;
    }
  }
}

.authority_table {
  width: 100%;
  margin-top: 10px;
  height: calc(100% - 30px - 10px - 30px);
}

.tips_bottom {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  background: #f4f4f4;
  box-sizing: border-box;
  border: 1px solid #e3e3e3;
  border-top: none;

  p {
    margin: 0;
    margin-left: 10px;
    font-size: 12px;
    color: #666;
  }
}

::v-deep .el-checkbox__label {
  font-size: 12px;
}

::v-deep .el-select__caret {
  margin-top: 0.093756rem;
}

// ::v-deep .el-input__icon {
//   line-height: .375023rem;
// }
</style>